<template>
	<view class="container">
	  <view class="cartlist">
		<checkbox-group @change="checkboxChange">
	    <view class="cart-item">
		  <view class="checkbox"><checkbox value="" checked="" /></view>
	      <image src="/static/p1.jpg" mode="widthFix"/>
	      <view class="pinfo">
	        <text class="pname">奔驰A级 2019款 A180 L</text>
	        <view class="cart-bottom">
	          <text class="pprice">￥232,460</text>
	          <view class="opt">
	            <button>-</button>
	            <input value="1" />
	            <button>+</button>
	          </view>
	        </view>
	      </view>
	    </view>
		<view class="cart-item">
		  <view class="checkbox"><checkbox value="" checked="" /></view>
		  <image src="/static/p1.jpg" mode="widthFix"/>
		  <view class="pinfo">
		    <text class="pname">奔驰A级 2019款 A180 L</text>
		    <view class="cart-bottom">
		      <text class="pprice">￥232,460</text>
		      <view class="opt">
		        <button>-</button>
		        <input value="1" />
		        <button>+</button>
		      </view>
		    </view>
		  </view>
		</view>
		<view class="cart-item">
		  <view class="checkbox"><checkbox value="" checked="" /></view>
		  <image src="/static/p1.jpg" mode="widthFix"/>
		  <view class="pinfo">
		    <text class="pname">奔驰A级 2019款 A180 L</text>
		    <view class="cart-bottom">
		      <text class="pprice">￥232,460</text>
		      <view class="opt">
		        <button>-</button>
		        <input value="1" />
		        <button>+</button>
		      </view>
		    </view>
		  </view>
		</view>
		<view class="cart-item">
		  <view class="checkbox"><checkbox value="" checked="" /></view>
		  <image src="/static/p1.jpg" mode="widthFix"/>
		  <view class="pinfo">
		    <text class="pname">奔驰A级 2019款 A180 L</text>
		    <view class="cart-bottom">
		      <text class="pprice">￥232,460</text>
		      <view class="opt">
		        <button>-</button>
		        <input value="1" />
		        <button>+</button>
		      </view>
		    </view>
		  </view>
		</view>
		<view class="cart-item">
		  <view class="checkbox"><checkbox value="" checked="" /></view>
		  <image src="/static/p1.jpg" mode="widthFix"/>
		  <view class="pinfo">
		    <text class="pname">奔驰A级 2019款 A180 L</text>
		    <view class="cart-bottom">
		      <text class="pprice">￥232,460</text>
		      <view class="opt">
		        <button>-</button>
		        <input value="1" />
		        <button>+</button>
		      </view>
		    </view>
		  </view>
		</view>
	    
	  </checkbox-group>
	  </view>
	  <view class="bottomopt">
	    <view>
		<checkbox value="" checked="">全选</checkbox>
	      <text>合计：</text>
	      <text>￥385,909</text>
	    </view>
	    <button @click="goOrder">去结算</button>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goOrder(){
				 uni.navigateTo({
				      url: '/pages/order/order',
				    })
			}
		}
	}
</script>

<style>
page{
background: #F8F8FF;
}
.container{
  margin:16rpx;
}
.cartlist{
  display: flex;
  flex-direction: column;
  padding-bottom: 100rpx;
}
 .cart-item{
  background-color: white;
  margin: 16rpx;
  display: flex;
  flex-direction: row;
  border-radius: 16rpx;
  overflow: hidden;
}
.cart-item .checkbox{
	padding-left:16rpx;
	display: flex;
	align-items: center;
}
.cart-item image{
  width:282rpx;
  margin-right: 16rpx;
  display: block;
}

 .pinfo{
  flex:1;
} 
.pname{
  font-size: 28rpx;
  line-height: 64rpx;
  padding-top:32rpx;
  display: block;
}
.cart-bottom{
  display: flex;
  flex-direction: row;
  margin-top: 16rpx;
}
.pprice{
  font-size: 28rpx;
  color:red;
  display: block;
  line-height: 50rpx;
  flex:1;
}

.opt{
  display: flex;
  flex-direction: row;
  line-height: 50rpx;
  border:1px solid #ccc;
  border-radius: 16rpx;
  overflow: hidden;
  margin: 0 10rpx;
}
.opt input{
  width:50rpx;
  background-color: #F8F8FF;
  text-align: center;
  font-size: 24rpx;
  display: block;
  height: 50rpx;
}
.opt button{
  width:50rpx;
  padding:0;
  height: 50rpx;
  line-height: 50rpx;
  background-color: white;
}

.bottomopt{
  display: flex;
  flex-direction: row;
  background-color: white;
  border-top:1px solid #ccc;
  width:100%;
  position: fixed;
  left: 0;
  bottom: 100rpx;
  height: 100rpx;
  z-index: 100;
}
.bottomopt view{
  font-size: 28rpx;
  line-height: 100rpx;
  padding-left: 16rpx;
  flex: 1;
  text-align: center;
}
.bottomopt view:first-child{
	text-align: left;
	padding-left: 40rpx;
}
.bottomopt view text{
  margin-left: 20rpx;
}
.bottomopt view text:last-child{
	margin-left: 10rpx;
  color:red;
}
.bottomopt button{
  width:200rpx;
  height: 78rpx;
  background-color: #d81e06;
  border-radius: 78rpx;
  color:white;
  line-height: 78rpx;
  margin-right: 32rpx;
  margin-top: 11rpx;
  font-size: 32rpx;
  padding:0;
} 
</style>
